Skip to content

Landing: add I Ching epigraph and emphasize transforms / nature / destiny - #25

Merged
koriym merged 2 commits into
masterfrom
landing-iching-epigraph
Apr 20, 2026
Merged

koriym merged 2 commits into
masterfrom
landing-iching-epigraph

Conversation

@koriym

@koriym koriym commented Apr 20, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Reframes the landing tagline around the three Be Framework keywords (transforms, nature, destiny) and roots them in the original source — 乾道變化、各正性命 (I Ching, Commentary on the Hexagram Qián, circa 4th Century BC).

  • The Chinese line is rendered as <span class="sr-only"> — invisible but indexed by search engines and accessible to screen readers.
  • The English line is the one visitors see, with the three load-bearing words bolded (mirrors BEAR.Sunday's landing emphasis style).
  • CTA shortened to be ».
  • white-space: nowrap keeps the longer line on a single row.

Test plan

  • Render at /index.html and confirm the new line displays on one row at desktop widths.
  • View source / inspect — the sr-only Chinese line is present in HTML.
  • Locale toggle still rewrites /en/ → /ja/ for the CTA.

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Accessibility

    • Added screen reader-only content with contextual information to enhance experience for users utilizing assistive technologies.
  • Content Updates

    • Refreshed hero section messaging with newly emphasized key terms and improved text formatting.
    • Updated primary call-to-action button label for clearer user guidance.

@coderabbitai

coderabbitai Bot commented Apr 20, 2026 •

Copy link
Copy Markdown
Contributor

Warning

Rate limit exceeded

@koriym has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 53 minutes and 36 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 53 minutes and 36 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ed73d1fb-19a7-4efe-9ff0-73e973876478

📥 Commits

Reviewing files that changed from the base of the PR and between 3d82fbb and 44637e8.

📒 Files selected for processing (1)
  • index.html
📝 Walkthrough

Walkthrough

Modified the hero section in the HTML with updated text content, added an accessibility span containing Chinese context, and changed the primary call-to-action button label from "Learn more »" to "be »".

Changes

Cohort / File(s) Summary
Hero Section Content Update
index.html
Updated hero paragraph text with new English sentence featuring emphasized terms; added off-screen accessibility span with Chinese context; modified CTA link label; added white-space: nowrap styling and <br> element.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A whisper of change in the hero's tale,
New words dance where old ones pale,
Chinese wisdom hidden from sight,
"be »" shines bold and bright,
Small tweaks that make the message bite! ✨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly and specifically summarizes the main change: adding an I Ching epigraph and emphasizing three key terms (transforms, nature, destiny) on the landing page.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch landing-iching-epigraph

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@claude

claude Bot commented Apr 20, 2026

Copy link
Copy Markdown

Code Review — PR #25: I Ching epigraph + landing copy

Overview

Small but visible change: adds an I Ching epigraph (screen-reader-only Chinese, visible English with bolded keywords) and shortens the CTA to be ».


Issues

white-space: nowrap on mobile (risk: medium)
The new visible line — "As the Way transforms, each thing settles into its nature and destiny." — is ~68 characters. With white-space: nowrap on the parent <p>, it will overflow and cause horizontal scroll on narrow viewports (e.g. 320px–375px phones). Consider scoping nowrap to just the new line via a <span style="white-space: nowrap"> wrapper instead of the whole <p>, or dropping nowrap and letting text wrap naturally.

sr-only vs visually-hidden (risk: low)
sr-only is a Bootstrap 4 utility. Bootstrap 5 renamed it to visually-hidden. The existing code already uses btn btn-primary, so Bootstrap is in play — but if the site ever upgrades to BS5 this span silently becomes non-hidden. Worth confirming which Bootstrap version is loaded.

Bare <br> as top-padding (style)
The extra <br> at the top of the <p> before the new line is doing layout work that belongs in CSS. Not a blocker, but it's fragile if spacing is ever adjusted.

CTA readability (minor)
be » is on-brand but very cryptic for a first-time visitor arriving without context. "Get started »" or "Learn more »" communicates intent; be » does not. Worth a quick user-test or at least a title attribute on the <a>.


Positives

  • Using sr-only for the Chinese text is the right call — keeps SEO/accessibility value without cluttering the visual layout.
  • Bolding transforms / nature / destiny mirrors the BEAR.Sunday landing pattern consistently.
  • The PR description is thorough and the test checklist is useful.

Verdict

The nowrap overflow on mobile is the one thing worth fixing before merge. Everything else is minor or stylistic.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@index.html`:
- Around line 10-12: The inline style on the <p> tag forces white-space: nowrap
universally and causes mobile overflow; remove the inline white-space rule, add
a class name (e.g., "hero-tagline") to that <p>, and create a CSS media query
(desktop breakpoint, e.g., min-width: 992px) that sets .hero-tagline {
white-space: nowrap; } so wrapping remains default on small screens and nowrap
only applies at desktop widths.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a4a1bda3-480b-494c-90e8-e646a08964fc

📥 Commits

Reviewing files that changed from the base of the PR and between 9093d99 and 3d82fbb.

📒 Files selected for processing (1)
  • index.html

Comment thread index.html Outdated
Root the landing tagline in the oldest recorded articulation of what
Be Framework is actually about: 乾道變化、各正性命 — from the Tuan
commentary on Qián (乾), the first hexagram of the I Ching (circa
4th Century BC).

Why this line, and why the landing page

  乾道變化   — As the Way transforms
  各正性命   — each thing settles into its nature and destiny

The two halves of the line mirror the two halves of Be Framework.

* 變化 (transformation) is metamorphosis. Be Framework's core loop —
  Input → Being → Final — is not a call stack, not a chain of
  responsibilities, not a pipeline of handlers. It is a sequence of
  transformations where a value becomes its next form. The same word
  the I Ching uses for cosmological change is the word we use for
  what a #[Be] attribute declares.

* 各正性命 (each settles into its nature and destiny) is the
  "Being-Oriented" half. 性 (nature) is what a thing *is* —
  intrinsic, non-behavioral. 命 (destiny / mandate) is what it was
  called to become. In a framework where final objects are immutable
  and every step is declared by what a value *will be*, not what a
  method *does*, 正性命 is not metaphor — it is the type signature.

Together the two halves name the same motion from opposite sides:
transformation happening everywhere, and each individual arriving
at what it was always going to be. That is the sentence a
Being-Oriented framework has been waiting to quote.

Translation choices

"settles into" rather than "is set right" or "fulfills". The
original 正 carries both the active sense (to rectify, to align)
and the intransitive sense (to come into alignment). English has
no single verb for "reach the position that was already yours,"
but "settles into" is closest — and it matches the experience of
reading a Be Framework pipeline, where nothing is forced into
place; each stage just arrives at what it had to be.

"nature and destiny" preserves both 性 and 命. Dropping either
collapses the pair that makes Be Framework legible: without 性
there is no Being, without 命 there is no Becoming.

Visual choices

* The Chinese is rendered invisibly via sr-only rather than
  displayed. The source matters — it should be searchable, indexed,
  and available to screen readers — but the landing page is for
  newcomers, not scholars of classical Chinese. The epigraph works
  the way a cornerstone works: load-bearing, rarely looked at.

* transforms / nature / destiny are bolded. These are the three
  words the tagline shares with the I Ching line, and they are the
  three words a reader of the manual will encounter again on every
  chapter. The bolding is not decoration; it is an index into the
  rest of the documentation.

* white-space: nowrap keeps the sentence unbroken. 乾道變化、
  各正性命 is a single breath in the original; the English should
  be too.

* The call to action shrinks from "Learn more »" to "be »".
  "Learn" is something you do to a topic from the outside. "be"
  is what the framework is named after, and the verb the next
  page will ask you to think in.
@koriym
koriym force-pushed the landing-iching-epigraph branch from 3d82fbb to 0bff185 Compare April 20, 2026 08:13
The previous inline white-space: nowrap applied universally and
caused horizontal overflow on narrow viewports, where the 71-char
English sentence cannot fit on one line at 1.8rem. Move the rule
into a media query (min-width: 1200px) scoped to .hero-tagline so
small screens wrap normally and nowrap kicks in only when the
viewport is actually wide enough to hold the single-breath line
the epigraph is modeled on.
@koriym
koriym merged commit c818ca8 into master Apr 20, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant